<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-18 09:22:10
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-19 18:38:56
 * @FilePath: \appGly\pages\Station\components\StationItem.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<view class="stationitemcontent" @click="$z.gopage(`/pages/Station/Stationxq?id=${item.id}`)">
		<view class="u-flex title">
			<view class="iconfont iconquyu sbicon"></view>
			<view class="u-line-1">{{ item.pcs }}</view>
			<view style="width: 8rpx"></view>
			<u-tag size="mini" shape="circle" type="primary" :text="$z.$t(`使用率${item['syl']}%`)"></u-tag>
		</view>
		<view class="zsb">
			{{
        $z.$t(`${$z.$t("总设备数")}${item.ChargeCarPcs.zx + item.ChargeCarPcs.lx || "0"}`)
      }}
			<text class="dl" v-if="item.b_zf">{{ $z.$t("独立") }}</text>
		</view>
		<view class="mui-ellipsis">
			<text class="zxChargeCar">
				{{ $z.$t(`${item["ChargeCarPcs"].zx}${$z.$t("在线")}`) }}
			</text>
			<text class="shu">|</text>
			<text class="lxChargeCar">
				{{ $z.$t(`${item["ChargeCarPcs"].lx}${$z.$t("离线")}`) }}
			</text>
			<text class="shu">|</text>
			<text class="kxChargeCar">
				{{ $z.$t(`${item["ChargeCarPcs"].kx}${$z.$t("空闲")}`) }}
			</text>
			<text class="shu">|</text>
			<text class="cdzChargeCar">
				{{ $z.$t(`${item["ChargeCarPcs"].cd}${$z.$t("充电中")}`) }}
			</text>
		</view>
		<view class="rightIcon">
			<u-icon name="arrow-right" size="24" color="#969696"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {};
		},
	};
</script>

<style lang="scss" scoped>
	.stationitemcontent {
		background: #fff;
		padding: 22rpx 30rpx;
		position: relative;

		.rightIcon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.title {
			font-size: 34rpx;

			.iconfont {
				width: 60rpx;
				height: 60rpx;
				font-size: 40rpx;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.zsb {
			font-size: 24rpx;
			line-height: 50rpx;
			color: #8f8f94;

			.dl {
				margin-left: 10px;
				color: #92ceff;
			}
		}
	}

	.zxChargeCar {
		font-size: 14px;
		color: #92ceff;
		margin-right: 5px;
	}

	.lxChargeCar {
		font-size: 14px;
		color: #969696;
		margin: 0 5px;
	}

	.cdzChargeCar {
		font-size: 14px;
		color: #ffa1a7;
		margin: 0 5px;
	}

	.kxChargeCar {
		font-size: 14px;
		color: #9affad;
		margin: 0 5px;
	}

	.shu {
		font-size: 16px;
		color: #aaaaaa;
		/*vertical-align: top;*/
		height: 14px;
		/* display: inline-block; */
	}
</style>